// JavaScript Document

$(document).ready(function() {
	
	  $(".scrollable").scrollable();
	 
			if ($(this).find('option:selected').val() === 'pattern') {		    
			  $('.patterns').show();		 
		    }
		    if ($(this).find('option:selected').val() === 'upload_image') {		   
			  $('.upload-image').show();			
		    }
		    
		    $( "#headerName" ).blur(function() {
		    	submitHeaderData();
		    	});
		    
		    $( ".socialForm" ).blur(function() {
		    	submitSocialData();
		    	});
		    
		    $('#config_tab a').live("click", function (e) {
		  	  e.preventDefault();
		  	  jQuery(this).tab('show');
		  	});
		    
		    
			 $(".menu-list li").hover(
	    				
		    	      function () {
		    	        $(this).find(".edit").show();
		    	      }, 
		    	       
		    	      function () {
		    	    	  $(this).find(".edit").hide();
		    	      }
		    	    );
		  
	});


function submitHeaderData() {
	sendUrl = "ajax/header.htm";
	var str = $("#headerForm").serialize();
	$.ajax({
			        type: "POST",
			        dataType: "text",
			        url: sendUrl,
			        data: str,
			        success: function(response){
			        // we have the response
			        
			        },
			        error: function(e){
			        $('#headerName').val('');
			        alert('Error: ' + e);
			        }
			        });
			        
}

function submitSocialData() {
	sendUrl = "ajax/social.htm";
	var str = $("#socialForm").serialize();
	$.ajax({
			        type: "POST",
			        dataType: "text",
			        url: sendUrl,
			        data: str,
			        success: function(response){
			        // we have the response
			        
			        },
			        error: function(e){
			      
			        alert('Error: ' + e);
			        }
			        });
			        
}


//SELECTOR DE LAYOUT
$('#design_templates').find('input').live("click", function() {
			$(this).parent().parent().find('li').removeClass('active');
			$(this).parent().addClass('active');
			setNewTemplate($(this).parent().attr("data-template"));

});
$('#design_templates ul li img').live("click", function() {
			$(this).parent().parent().find('li').removeClass('active');
			$(this).parent().addClass('active');
			$(this).parent().parent().find('input').attr('checked', false);
			$(this).parent().find('input').attr('checked', true);
			setNewTemplate($(this).parent().attr("data-template"));
});

function setNewTemplate(template){
	sendUrl = "ajax/template.htm";
	$.ajax({
	    type: 'POST',
	    dataType: "json", //lets specify that we will return data as Json                  
	    url: sendUrl,
	    data: {'template': template},
	    success:function(data) {
	    	$('.color-selector > ul > li').remove();
	    	
	    	$.each(data[1], function(i, item) {
	    		if(i == 0){
	    			$('.color-selector ul').append('<li class="active"><img src="images/colors/'+item+'.jpg"><input name="color" type="radio" value="'+item+'" checked /></li>');
	    		}else{
	    			$('.color-selector ul').append('<li><img src="images/colors/'+item+'.jpg"><input name="color" type="radio" value="'+item+'"/></li>');
	    		}
	    	});
	    	
	    },
	    error: function() {
	    	//handle error here
	    }
	});
}

//SELECOTOR DE COLORES
$('.color-selector').find('input').live("click", function() {
			$('.color-selector > ul > li').removeClass('active');
			$(this).parent().addClass('active');
			sendUrl = "ajax/palette.htm";
			$.ajax({
			    type: 'POST',
			    dataType: "json", //lets specify that we will return data as Json                  
			    url: sendUrl,
			    data: {'palette': $(this).val()},
			    success:function(data) {
			    	$('.items').empty();
			    	var stringHTML="<div>";
			    	$.each(data[2], function(i, item) {	   
			    		if(i==0){		    			
			    			//stringHTML+='<span class="active"><img src="images/patterns/'+item+'" /><input name="pattern" type="radio" value="'+item+'" checked /></span>';
			    		}else{
			    			stringHTML+='<span><img src="images/patterns/'+item+'" /><input name="pattern" type="radio" value="'+item+'"/></span>';
			    		}
			    		if((i+1)%5==0){
			    			stringHTML+='</div><div>';
			    			$('.background-container a').removeClass('disabled');
			    		}
			    	});
			    	stringHTML+="</div>";
			    	$('.items').html(stringHTML);
			    },
			    error: function() {
			    	alert("error");
			    }
			});

});



//DROPDOWN OPCION DE FONDOS DEL BODY
$('.background-selector').live("change", function() {

    if ($(this).find('option:selected').val() === 'none') {
      $('.upload-image').hide();
	  $('.patterns').hide();
	  setBgThemeType(0);
    }

	if ($(this).find('option:selected').val() === 'pattern') {
      $('.upload-image').hide();
	  $('.patterns').show();
	  setBgThemeType(1);
    }

    if ($(this).find('option:selected').val() === 'upload_image') {
      $('.patterns').hide();
	  $('.upload-image').show();
	  setBgThemeType(2);
    }

});



function setBgThemeType(bgtype){
	
	sendUrl = "ajax/bgThemeType.htm";
	$.ajax({
	    type: 'POST',
	    dataType: "text", //lets specify that we will return data as Text                  
	    url: sendUrl,
	    data: {'bgtype': bgtype},
	    success:function(data) {		 
	    	
	    },
	    error: function() {
	    	//handle error here
	    }
	});
}

// SELECTOR DE PATTERNS PARA BODY
$('.background-container span input, .background-container span img').live("click", function() {
			$('.background-container > div > div > div > span').removeClass('active');
			$(this).parent().addClass('active');
			$(this).parent().find('input').attr('checked', true);
			sendUrl = "ajax/bgTheme.htm";
			$.ajax({
			    type: 'POST',
			    dataType: "text", //lets specify that we will return data as Text                  
			    url: sendUrl,
			    data: {'theme': $(this).val()},
			    success:function(data) {		 
			    	
			    },
			    error: function() {
			    	//handle error here
			    }
			});
});



//DROPDOWN OPCION DE FONDOS DEL MENU 
$('.menu-selector').live("change", function() {

    if ($(this).find('option:selected').val() === 'none') {
      $('.menu-container').hide();
    }

	if ($(this).find('option:selected').val() === 'menu') {
	  $('.menu-container').show();
    }

});



// SELECTOR DE BACKGOURNDS DEL MENU
$('.menu-container').find('input').live("click", function() {
			$('.menu-container > div > div > div > span').removeClass('active');
			$(this).parent().addClass('active');

});




// AGREGA UNA CATEGORIA NUEVA
$(".content .addcate").live("click", function() { 
    $(this).parent().find('ul.cate').append('<li>' + '<a href="#cate">' + 'Categoria' + '</a>' + '</li>');
	return false;
}); 





